<template>
    <div>
        <el-row type="flex" justify="end" class="header toolbar">
            <el-col :span="2" class="header-btn">
                <el-button type="primary">添加</el-button>
            </el-col>
        </el-row>
        <!-- 表格开始  -->
        <el-table
                stripe
                ref="multipleTable"
                :data="userList"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="用户名">
                <template slot-scope="scope">{{ scope.row.username }}</template>
            </el-table-column>
            <el-table-column
                    prop="merch_name"
                    label="商户">
            </el-table-column>
            <el-table-column
                    prop="store_name"
                    label="门店">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">{{ scope.row.status ? '启用': '禁用' }}</template>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="添加时间">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="info" size="mini" @click="editUser(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delUser(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </div>
</template>

<script>
    import { getUser } from '../../api/userAPI'
    export default {
        name: "Log",
        data() {
            return {
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                // status: '',
                // keyword: '',
                userList: [],
                total: 0,
                pageSize: 10, // 每页显示条目个数
                pageSizes: [10, 20, 30, 40], // 每页显示个数选择器的选项设置
                currentPage: 1, // 当前页数
            }
        },
        created() {
            this._getUser() // 获取后台用户列表
        },
        methods: {
            async _getUser() {
                let data = {p: this.currentPage, length: this.pageSize}
                const res = await getUser(data)
                console.log(res)
                this.userList = res.data.user
                this.total = res.data.total
            },
            editUser(index, row) {
                console.log(row)
            },
            delUser(index, row) {
                console.log(row)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
                // 改变每页显示的条数
                this.pageSize = val
                this._getUser() // 获取后台用户列表
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`)
                this.currentPage = val
                this._getUser() // 获取后台用户列表
            },
        }
    }
</script>

<style scoped lang="scss">
    .header {
        /*margin-top: 10px;*/
    }
</style>
